<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app"></div>

    <template id="my-app">
      <!-- 1.绑定textarea，选中获取value -->
      <label for="intro">
        自我介绍
        <textarea
          name="intro"
          id="intro"
          cols="30"
          rows="10"
          v-model="intro"
        ></textarea>
      </label>
      <h2>intro：{{intro}}</h2>

      <!-- 2.checkbox -->
      <!-- 2.1.单选框，选中获取布尔值 -->
      <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree" /> 同意协议
      </label>
      <h2>isAgree：{{isAgree}}</h2>

      <!-- 2.2.多选框，选中获取value -->
      <span>您的爱好：</span>
      <label for="basketball">
        <input type="checkbox" id="basketball" v-model="hobbies" value="篮球" />
        篮球
      </label>
      <label for="football">
        <input type="checkbox" id="football" v-model="hobbies" value="足球" />
        足球
      </label>
      <label for="tennis">
        <input type="checkbox" id="tennis" v-model="hobbies" value="网球" />
        网球
      </label>
      <h2>hobbies：{{hobbies}}</h2>

      <!-- 3.radio，选中获取value -->
      <span>您的性别：</span>
      <label for="male">
        <input type="radio" id="male" value="男" v-model="gender" />男
      </label>
      <label for="female">
        <input type="radio" id="female" value="女" v-model="gender" />女
      </label>
      <h2>gender：{{gender}}</h2>

      <!-- 4.select，选中获取value -->
      <span>您喜欢的水果：</span>
      <select v-model="fruit" multiple size="2">
        <option value="苹果">苹果</option>
        <option value="橙子">橙子</option>
        <option value="香蕉">香蕉</option>
      </select>
      <h2>fruit：{{fruit}}</h2>
    </template>

    <script src="../js/Vue.js"></script>
    <script>
      const app = {
        template: '#my-app',
        data() {
          return {
            intro: 'Hello World',
            isAgree: false,
            hobbies: [],
            gender: '男',
            fruit: '苹果'
          }
        }
      }

      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>
